<template>

  <a-layout id="pc-main">
    <a-layout-sider id="pc-main-sider" theme="light" :width="150" :style="{
      background: '#e5e5e5',        
    }" >
      <div class="tiny-side-header">
        <div class="logo">
          <SettingOutlined />
        </div>
        <h1>设置</h1>
      </div>
      <a-menu id="leftMenu" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline"
        style="background-color: #e5e5e5;border-right: 0px" theme="light" :items="menuitems" @click="handleClick"></a-menu>

    </a-layout-sider>

    <a-layout-content id="pc-main-content" :style="{
      background: '#fff',
      minHeight: '450px',
      padding: '0 24px 24px 24px',
      margin: '0',
      minWidth: '0',
      overflow: 'auto',
      height: '100%'
    }">
      <!-- 可拖拽头部区域 -->
      <div id="content-header" style="width:100%;height:40px;-webkit-app-region: drag;"> </div>
      <!-- 内容区域 -->
      <router-view />
      
    </a-layout-content>

  </a-layout>

</template>

<script setup>
import { reactive, ref, watch, h } from "vue";
import {
  SettingOutlined
} from "@ant-design/icons-vue";

import { useRouter } from "vue-router";
const router = useRouter();

const selectedKeys = ref(["1"]);
const openKeys = ref([]);

function getItem(label, key, icon, children, type) {
  return {
     key, icon, children, label, type
  };
}

const menuitems = reactive([
  getItem("通用", "common", ''),
  getItem("帮助中心", "help", ''),
  getItem("关于", "about", ''),
]);

const routes = {
    common: { name: '通用设置'},
    help: { name: '帮助中心',query: {}},
    about: { name: '关于软件'},
  };

const handleClick = (e) => {
  const route = routes[e.key];
  if (route) {
    router.push(route);
  }  
};

</script>

<style lang="less">

.ant-layout-sider{
  -webkit-app-region: drag;
}
.ant-menu{
  -webkit-app-region: no-drag;
}
.tiny-side-header {
  padding: 15px 25px 0 25px;
  font-size: 15px;
  h1 {
    color: #333;
    font-size: 25px;
  }
  .logo {
    width: 150px;
    font-size: 24px;
    margin-bottom: 40px;
  }
}

</style>